<template>
    <div id="myChart" style="width: 50vw; height:40vh;margin: 0 auto"></div>

</template>

<script setup lang="ts">
import {computed, onMounted, ref, toRefs, watch} from "vue";
import {OrderVO} from "../type/order";
import moment from "moment";
import * as echarts from 'echarts'
import {EChartsType} from "echarts";

const props = defineProps({
    orderList: {
        type: Array,
        required: true,
        default: () => [] as OrderVO[],
    }
});

//解构
const {orderList} = toRefs(props)
//监听
watch(orderList,(value)=>{
    orderList!.value = value?.value as OrderVO[]
    //计算仅七天的订单数
    const ordersCount = {};
    orderList!.value.forEach(order =>{
        const formatDate = moment(order.createTime).format("YYYY-MM-DD")
        ordersCount[formatDate] = (ordersCount[formatDate] || 0) + 1;
    })
    const x = computed(() => Object.keys(ordersCount).sort());
    const y = computed(() =>x.value.map(date => ordersCount[date]));
    let myChart = echarts.init(document.getElementById("myChart"));
    // 绘制图表同上
    myChart.setOption({
        title: {
            text: '最近七天的订单统计',
            left: 'center'
        },
            xAxis: {
                type: 'category',
                data: x.value
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
        series: [
            {
                data: y.value,
                type: 'line',
                smooth: true,
                label: {
                    show: true, // 显示标签
                    formatter: '{c}', // 标签内容格式，{c} 表示数据值
                    position: 'top' // 标签位置，这里设置为数据点上方
                }
            }
        ]
        }
    )

})


</script>

<style scoped>

</style>
